Como usar class="card double-border"

O que é Double Border?

Double Border é um efeito visual que cria duas bordas ao redor de um elemento, separadas por uma cor intermediária (geralmente branca). É criado usando a propriedade box-shadow combinada com border.

Como funciona:

.double-border {
    border: 3px solid #667eea;                    /* Borda interna (primeira cor) */
    box-shadow: 0 0 0 6px white,                  /* Espaço branco no meio */
                0 0 0 9px #764ba2;                /* Borda externa (segunda cor) */
}
            

📝 Como funciona o box-shadow:
• 0 0 0 6px white - Cria um "anel" branco de 6px ao redor da borda
• 0 0 0 9px #764ba2 - Cria um "anel" roxo de 9px, mas apenas os 3px externos ficam visíveis

Exemplo Original

Esta é a implementação básica do double-border. Note as duas cores separadas pelo espaço branco.

<div class="card double-border">
    <h3>Double Border</h3>
    <p>Duas bordas com cores diferentes</p>
</div>

Como Escolher as Cores das Bordas

Para alterar as cores, modifique os valores hexadecimais no border e box-shadow:

Esquema de Cores	Borda Interna	Borda Externa	Código
Azul + Roxo (original)	#667eea	#764ba2	border: 3px solid #667eea;
Azul + Verde	#3498db	#2ecc71	border: 3px solid #3498db;
Vermelho + Roxo	#e74c3c	#9b59b6	border: 3px solid #e74c3c;
Laranja + Amarelo	#f39c12	#f1c40f	border: 3px solid #f39c12;

Exemplos de Combinações de Cores:

Azul + Roxo

Combinação original

Azul + Verde

Cores frias

Vermelho + Roxo

Cores quentes

Laranja + Amarelo

Tons ensolarados

Como Alterar a Espessura das Bordas

A espessura é controlada pelos valores no border e box-shadow. Você precisa manter as proporções:

/* Borda Fina */
.thin-double-border {
    border: 2px solid #667eea;              /* Borda interna: 2px */
    box-shadow: 0 0 0 4px white,            /* Espaço: 4px (2x a borda) */
                0 0 0 6px #764ba2;          /* Total: 6px (espaço + 2px) */
}

/* Borda Grossa */
.thick-double-border {
    border: 5px solid #667eea;              /* Borda interna: 5px */
    box-shadow: 0 0 0 8px white,            /* Espaço: 8px */
                0 0 0 13px #764ba2;         /* Total: 13px (espaço + 5px) */
}
            

Exemplos de Espessuras:

Borda Fina (2px)

Mais sutil e delicada

Borda Média (3px)

Espessura padrão

Borda Grossa (5px)

Mais impactante

Borda Extra Grossa (7px)

Muito destacada

Como Alterar a Altura da Caixa

Assim como no glassmorphism, a altura é controlada por min-height e padding:

/* Altura pequena */
.height-small {
    min-height: 120px;
    padding: 15px;
}

/* Altura média (padrão) */
.height-medium {
    min-height: 200px;
    padding: 25px;
}

/* Altura grande */
.height-large {
    min-height: 300px;
    padding: 40px;
}
            

Exemplos de Alturas com Double Border:

Altura Pequena

120px de altura mínima

Altura Média

200px de altura mínima

Altura Grande

300px de altura mínima

Variações Avançadas

1. Bordas com Cantos Diferentes:

Cantos Arredondados

border-radius: 25px

Super Arredondado

border-radius: 50px

Cantos Assimétricos

border-radius: 30px 10px

2. Double Border com Gradiente:

Borda com Gradiente

Usando linear-gradient para efeitos mais complexos

Fórmula para Calcular os Valores

Regra Básica:

Borda interna: Espessura desejada (ex: 3px)
Espaço branco: 2x a espessura da borda (ex: 6px)
Borda externa: Espaço + espessura da borda externa (ex: 6px + 3px = 9px)

/* Para uma borda de 4px: */
border: 4px solid cor1;
box-shadow: 0 0 0 8px white,        /* 4px × 2 = 8px */
            0 0 0 12px cor2;        /* 8px + 4px = 12px */

Exemplo Prático Completo

Vamos criar um double-border personalizado: verde escuro + dourado, borda grossa, altura grande:

/* No CSS */
.double-border-custom {
    border: 5px solid #27ae60;              /* Verde escuro, 5px */
    box-shadow: 0 0 0 10px white,           /* Espaço: 5px × 2 = 10px */
                0 0 0 15px #f39c12;         /* Total: 10px + 5px = 15px */
    min-height: 280px;
    padding: 35px;
    border-radius: 20px;
}

/* No HTML */
<div class="card double-border-custom">
    <h3>Meu Double Border Personalizado</h3>
    <p>Verde, dourado, grosso e alto</p>
</div>
            

Resultado Final

Double border personalizado: verde + dourado, borda de 5px, altura grande

Dicas Importantes

⚠️ Cuidados:
• Box-shadow não ocupa espaço no layout - pode sobrepor outros elementos
• Use margin adequada para evitar sobreposições
• Teste em diferentes tamanhos de tela

Proporções: Mantenha a proporção 2:1 entre espaço branco e espessura da borda
Contraste: Escolha cores que contrastem bem entre si e com o fundo
Hierarquia: Use bordas mais grossas para elementos mais importantes
Espaçamento: Adicione margin extra para compensar o box-shadow
Mobile: Considere bordas mais finas em telas pequenas
Acessibilidade: Não use apenas cor para transmitir informação

💡 Dica Pro: Para evitar sobreposições, adicione uma margem igual ao valor total do box-shadow nos elementos adjacentes.